<template>
	<div class="app-container">
   		<div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
        <div class="margin-b10">
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.orderNum" clearable placeholder="搜索订单号、课程名称、讲师姓名或购买者" class="width400"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.mobile" clearable placeholder="搜索手机号" class="width400"></el-input>
          <el-date-picker type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="下单开始时间" v-model="listQuery.display_time" class="width150">
          </el-date-picker>
          <span class="c-ph20 font-s12 c-fc-xgray">到</span>
          <el-date-picker type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="下单结束时间"  v-model="listQuery.end_time" class="width150">
          </el-date-picker>
        </div>
        <div>
          <el-select clearable class="width200" v-model="listQuery.selectPayType" placeholder="支付方式">
            <el-option key="balance" value="2" label="余额支付">
            </el-option>
            <el-option key="wx" value="1" label="微信支付">
            </el-option>
          </el-select>
          <el-select clearable class="width200" v-model="listQuery.selectType" placeholder="类型">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
          </el-select>
          <el-select clearable class="width220" v-model="listQuery.selectPay" placeholder="订单状态">
              <el-option value="1" key="1" label="已付款">
              </el-option>
              <el-option value="-1" key="-1" label="待付款">
              </el-option>
          </el-select>
          <el-button type="primary" @click="handleFilter" class="search margin-l" icon="el-icon-search">搜索</el-button>
          <el-button v-if="tableData.length > 0" @click="handleDownload">导出Excel</el-button>
        </div>
	    </el-form>
		</div>
		<div>
			<el-table :data="tableData" row-key="id" v-loading="listLoading" element-loading-text="加载中..." class="table c-width100 color-222 family-PingFangSC-Regular font-s12" fit highlight-current-row :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}">
			 	<el-table-column align="center" label="名称">
			        <template slot-scope="scope">
			          <div class="color-999 line-limit-length-200 font-s12 text-alignL" :title="scope.row.orderNo">订单号：{{scope.row.orderNo}}</div>
                <div class="font-s14 text-alignL">{{scope.row.prodName}}</div>
                <div class="font-s12 text-alignL">
                  <span v-if="scope.row.prodType == 1">购买VIP</span>
                  <span v-if="scope.row.prodType == 2">升级VIP</span>
                  <span v-if="scope.row.prodType == 3">升级VIP2</span>
                  <span v-if="scope.row.prodType == 4">升级SVIP</span>
                  <span v-if="scope.row.prodType == 5">购买课程</span>
                  <span v-if="scope.row.prodType == 6">购买分类</span>
                  <span v-if="scope.row.prodType == 7">活动付费</span>
                  <span v-if="scope.row.prodType == 8">资料购买</span>
                  <span v-if="scope.row.prodType == 9">购买栏目</span>
                  <span v-if="scope.row.prodType == 10">社群购买</span>
                  <span v-if="scope.row.prodType == 11">购买测评</span>
                  <span v-if="scope.row.prodType == 12">商城购买</span>
                  <span v-if="scope.row.prodType == 13">独立商城</span>
                  <span v-if="scope.row.prodType == 20">余额利息</span>
                  <span v-if="scope.row.prodType == 22">购买VIP2</span>
                  <span v-if="scope.row.prodType == 23">购买SVIP</span>
                  <span v-if="scope.row.prodType == 24">赠送专栏</span>|
                  <span class="c-fc-blue">￥{{scope.row.prodPrice}}</span>
                </div>
			        </template>
		      	</el-table-column>
        <el-table-column align="center" width="200" label="下单/付款时间">
		        <template slot-scope="scope">
		          <span>{{scope.row.createdAt}}</span>
              <div>{{scope.row.payAt}}</div>
		        </template>
		    	</el-table-column>
        <el-table-column  align="center" width="150" label="购买者">
          <template slot-scope="scope">
            <div class="clearfix line-limit-length-130 text-alignL">
              <div class="img fl margin-r10"><img :src="scope.row.headimgurl || defultImg" @error="setDefultImg" alt=""></div>
              <div class="margin-t10" :class="scope.row.nickname != null && scope.row.nickname.length>8?'line-limit-length-130':'fl'">{{scope.row.nickname}}</div>
            </div>
          </template>
        </el-table-column>
                <el-table-column  align="center" width="150" label="电话号码">
          <template slot-scope="scope">
           <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="支付方式">
          <template slot-scope="scope">
            <span v-if="scope.row.paymentMethod == 1">微信支付</span>
            <span v-if="scope.row.paymentMethod == 2">余额支付</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="100" label="实付金额">
          <template slot-scope="scope">
            <span>￥{{scope.row.payMoney}}</span>
          </template>
        </el-table-column>
					<el-table-column align="center" width="100" label="订单状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 1">已付款</span>
							<span v-if="scope.row.status == 0" style="color: red;">待付款</span>
							<span v-if="scope.row.status == -1" style="color: red;">付款失败</span>
							<span v-if="scope.row.status == -2" style="color: red;">取消订单</span>
						</template>
			    </el-table-column>
			    <el-table-column  align="center" width="100" label="操作">
						<template slot-scope="scope">
							<b @click="look(scope.$index)">订单详情</b>
						</template>
			    </el-table-column>
		   </el-table>
		   <div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.page"
			      :page-sizes="[10, 20, 30, 40]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
		<lookOrder v-show="isShowLook" :lookInfo="lookInfo" @changeShowLook="hideLook"></lookOrder>
	</div>
</template>
<script>
import { getOrderList } from '@/api/order'
import defultImg from '@/assets/default_head.png'
export default {
  components: {
    lookOrder: require('./lookOrder.vue').default
  },
  data() {
    return {
      defultImg,
      listQuery: {
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        display_time: null,
        end_time: null,
        selectPayType: null,
        selectType: null,
        selectPay: null,
        orderNum: null,
        selctPayType: null
      },
      options: [
        { id: 1, value: '购买VIP' },
        { id: 23, value: '购买SVIP' },
        // { id: 2, value: '升级VIP' },
        // { id: 3, value: '升级VIP2'},
        // { id: 4, value: '升级svip' },
        { id: 5, value: '购买课程' },
        { id: 6, value: '购买分类' },
        { id: 7, value: '活动付费' },
        { id: 8, value: '资料购买' },
        { id: 9, value: '购买栏目' },
        { id: 10, value: '社群购买' },
        { id: 11, value: '购买测评' },
        // { id: 12, value: '商城购买'},
        // { id: 13, value: '独立商城'},
        // { id: 20, value: '余额利息'},
        // { id: 22, value: '购买VIP2'},
        { id: 24, value: '赠送专栏' }
      ],
      tableData: [],
      isShowLook: false,
      lookInfo: {
        orderNo: null,
        deductedMoney: null,
        deductedPoints: null
      },
      listLoading: false,
      companyId: null,
      URLAPI: process.env.BASE_API
    }
  },
  created() {
    this.getList()
  },
  methods: {
    setDefultImg(e) {
      e.target.src = defultImg
    },
    getList() {
      this.listLoading = true
      getOrderList(this.listQuery).then(res => {
        console.log('订单', res)
        this.tableData = res.data.data.orders.data
        this.listQuery.total = res.data.data.orders.total
        this.listLoading = false
        this.companyId = res.data.data.companyId
      }).catch(err => {
        console.log(err)
      })
    },
    look(index) {
      this.isShowLook = true
      this.lookInfo = {
        orderNo: this.tableData[index].orderNo,
        deductedMoney: this.tableData[index].deductedMoney,
        deductedPoints: this.tableData[index].deductedPoints,
        discount: this.tableData[index].discount,
        isCard: this.tableData[index].isDeductedByInvitationCard,
        desc: ((this.tableData[index].prodType == 1 || this.tableData[index].prodType == 23 || this.tableData[index].prodType == 2 || this.tableData[index].prodType == 4) && this.tableData[index].prodPrice != this.tableData[index].payMoney) ? '补差价' : null
      }
    },
    hideLook(msg) {
      this.isShowLook = msg
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.page = 1
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) { // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDownload() {
      var form = ''
      if (this.listQuery.display_time) {
        form += '&display_time=' + this.listQuery.display_time
      }
      if (this.listQuery.end_time) {
        form += '&end_time=' + this.listQuery.end_time
      }
      if (this.listQuery.selectPayType) {
        form += '&selectPayType=' + this.listQuery.selectPayType
      }
      if (this.listQuery.selectType) {
        form += '&selectType=' + this.listQuery.selectType
      }
      if (this.listQuery.selectPay) {
        form += '&selectPay=' + this.listQuery.selectPay
      }
      if (this.listQuery.orderNum) {
        form += '&orderNum=' + this.listQuery.orderNum
      }
      if (this.listQuery.selctPayType) {
        form += '&selctPayType=' + this.listQuery.selctPayType
      }
      window.open(this.URLAPI + '/excel/excelOrders?companyId=' + this.companyId + form)
    }
  }
}
</script>

<style scoped>
</style>
